<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="lx6\css\bootstrap.css">
    <script src="lx6\js\jquery.min.js" type="text/javascript"></script>
    <script src="lx6\js\bootstrap.js" type="text/javascript"></script>
    <style>
        .div{
            margin: 0 auto;
        }
        td{
            border: 1px solid black;padding: 1px;
        }
        h1{
            text-align: center;
        }
        table{
            border-collapse: collapse;
        }
        button{
            margin: 0 auto;
        }
        img{
            text-align: center;
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid" style="background-color: cyan;"> 
        <div class="navbar-header">
            <nav class="navbar-brand"><a href="#"></a>我的响应式网站</nav>
            <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target="#example-navbar-collapse">
                <span class="sr-only">切换导航</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#"></a>
        </div>
        <div class="collapse navbar-collapse" id="example-navbar-collapse">
            <ul class="nav navbar-nav">
                        <li><a href="#cfb">九九乘法表</a></li>
                        <li><a href="#scientist">著名科学家介绍</a></li>
                        <li><a href="#callme">联系我们</a></li>
                        <li><a href="#askonline">在线提问</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        </div>
    </nav>
    <div class="container-fluid" style="display: block;position: relative">
        <div id="cfb">
            <h1>九九乘法表</h1>
            <div id="bg" style="display: block">
                <script type="text/javascript">
                    document.write("<table align='center'>");
                    for(a=1;a<=9;a++){
                        document.write("<tr>");
                    for(b=1;b<=a;b++){
                        document.write("<td>");
                        document.write("&nbsp"+a+"*"+b+"="+a*b+"&nbsp;&nbsp");
                        document.write("</td>");
                    }
                    document.write("</tr>")
                    }
                    document.write("</table>");
                </script>
            </div>
            <div id="bg2" style="display: none">
                <script type="text/javascript">
                    for(let a=1;a<=9;a++){
                        document.write("<table align='center'>");
                        document.write("<tr>");
                        for(let b=1;b<=a;b++){
                            document.write("<td style='text-align: center;column-span: 4'>");
                            document.write("&nbsp"+a+"*"+b+"="+a*b+"&nbsp;&nbsp");
                            document.write("</td>");
                        }
                        document.write("</tr>");
                    }
                    document.write("</table>");
                </script>
                </div>
            <br>
            <div style="text-align: center;">
                <button type="button" class="btn btn-info" onclick="zj()">直角九九乘法表</button>
                <button type="button" class="btn btn-info" onclick="dy()">等腰九九乘法表</button>
                <script type="text/javascript">
                    function dy() {
                        if(document.getElementById("bg").style.display=="block"){
                            document.getElementById("bg").style.display="none"
                            document.getElementById("bg2").style.display="block"
                        }
                    }
                </script>
                <script type="text/javascript">
                    function zj() {
                        if(document.getElementById("bg").style.display=="none"){
                            document.getElementById("bg").style.display="block"
                            document.getElementById("bg2").style.display="none"
                        }
                    }
                </script>
            </div>
        </div>
    </div>
    <div class="container">
        <div id="scientist">
            <div class="row">
                <h1>著名科学家介绍</h1>
                <div class="col-md-6 col-xs-12" style="text-align: center;">
                    <p style="text-align: center;">牛顿</p>
                    <img src="lx6\images\newton.PNG"  alt="newton">
                    <p>艾萨克·牛顿（1643年1月4日—1727年3月31日）爵士，英国皇家学会会长，英国著名的物理学家，百科全书式的“全才”，著有《自然哲学的数学原理》、《光学》。在力学上，牛顿阐明了动量和角动量守恒的原理，提出牛顿运动定律。在光学上，他发明了反射望远镜，并基于对三棱镜将白光发散成可见光谱的观察，发展出了颜色理论。他还系统地表述了冷却定律，并研究了音速。在经济学上，牛顿提出金本位制度。</p>
                </div>

                <div class="col-md-6 col-xs-12" style="text-align: center;">
                    <p style="text-align: center;">特斯拉</p>
                    <img src="lx6\images\tsl.jpg" alt="tsl" width="200" height="250">
                    <p>尼古拉·特斯拉（Nikola Tesla，1856年7月10日—1943年1月7日），塞尔维亚裔美籍发明家、物理学家、机械工程师、电气工程师。1897年，他使马可尼的无线电通信理论成为现实。1898年，他制造出世界上第一艘无线电遥控船，无线电遥控技术取得专利。1899年，他发明了X光（X-Ray）摄影技术。</p>
                    
                </div>

                <div class="col-md-6 col-xs-12" style="text-align: center;">
                    
                    <p style="text-align: center;">莱布尼茨</p>
                    <img src="lx6\images\lbnc.jpg" alt="lbnc">
                    <p>戈特弗里德·威廉·莱布尼茨（Gottfried Wilhelm Leibniz，1646年7月1日－1716年11月14日），德国哲学家、数学家，历史上少见的通才，被誉为十七世纪的亚里士多德。莱布尼茨在数学史和哲学史上都占有重要地位。在数学上，他和艾萨克·牛顿先后独立发现了微积分，而且他所使用的微积分的数学符号被更广泛的使用，莱布尼茨所发明的符号被普遍认为更综合，适用范围更加广泛。</p>
                    <br>
                </div>

                <div class="col-md-6 col-xs-12" style="text-align: center;">
                    <p style="text-align: center;">爱迪生</p>
                    <img src="lx6\images\ads.jpg" alt="ads">
                    <p>托马斯·阿尔瓦·爱迪生（Thomas Alva Edison，1847年2月11日—1931年10月18日），出生于美国俄亥俄州米兰镇，逝世于美国新泽西州西奥兰治。世界著名的发明家、物理学家、企业家，拥有众多知名重要的发明专利超过2000项。包括对世界极大影响的留声机、电影摄影机、钨丝灯泡等。被传媒授予“门洛帕克的奇才”称号!美国《生活》杂志评选出千年来全球最有贡献的一百位人物，发明电灯的美国发明家爱迪生名列榜首。爱迪生被美国的权威期刊《大西洋月刊》评为影响美国的100位人物第9名。</p>
                </div>
            </div>
        </div>
    </div>
    <div  class="container">
        <div id="callme">
            <div class="row">
            <div class="col-md-6" >
                <h1>联系我们</h1>
                <dl>
                    <dt style="text-align: center;">联系方式</dt>
                    <dd>地址：河南省信阳时浉河区南湖路237号</dd>
                    <dd>邮编：454000</dd>
                    <dd>网址：http://www.xynu.edu.cn/</dd>
                    <dd>网址：http://www.xynu.edu.cn/</dd>
                    <dd>电话：12345678910</dd>
                </dl>
            </div>
            <div id="askonline">
                <div class="row">
                    <h1>在线提问</h1>
                    <div class="col-md-6" >
                        <form role="form">
                            <div class="form-group">
                                <label for="name">姓名</label>
                                <input type="text" class="form-control" id="name" placeholder="请输入姓名">
                            </div>
                            <div class="form-group">
                                <label for="emial">邮箱</label>
                                <input type="text" class="form-control" id="emial" placeholder="请输入邮箱">
                            </div>
                            <div class="form-group">
                                <label for="questions">问题</label>
                                <input type="text" class="form-control" id="questions" placeholder="请输入你要提问的问题">
                            </div>
                            <button type="submit" style="background-color: rgb(18, 146, 231);">提交</button>
                        </form>
                        
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>